.zuiwaiceng{
    width: 640px;
    height: 361px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* border: 1px solid black; */
    
}

.waiceng{
    width: 600px;
    height: 327px;
    /* background-color: rgb(38, 37, 90); */
    margin: 20px auto;
    border: 3px solid #c0daee;
    /* border-width: 10px; */
    /* border-image: radial-gradient( 
        circle closest-side center,
        skyblue,
        white
    ); */
    border-radius: 20px;
    box-shadow: 0px 0px 25px 1px rgba(94, 211, 231, 0.5);
}

.head{
    width: 100%;
    height: 30px;
    display: flex;
    /* background: wheat; */
    /* background: url(../images/云顶logo_03.png); */
    align-items: center;
    justify-content: center;
    position: relative;
}

div span{
    width: 30px;
    height: 20.89px;
}

div span:nth-child(2){
    flex: 1;
    /* background-color: white; */
}

div span:nth-child(1){
    position: absolute;
    left: 15px;
}

div span h5{
    position: absolute;
    width: 100px;
    top: 0px;
    left: 25px;
    font-size: 15px;
}

img{
    width: 20px;
    height: 20px;
    
}

.lanmu{
    display: flex;
    justify-self: space-around;
    margin: 0 auto;
    width: 450px;
    height: 30px;
    /* background-color: #63d3f7; */
    box-shadow: 0px 1px 6px 0px rgba(209, 209, 209, 0.3);
    border-radius: 4px;
    background-color: rgba(99, 211, 247, 0.05);
    /* opacity: 0.05; */
}

.lanmu .dandu{
    width: 20px;
    height: 12px;
    font-size: 10px;
    margin: auto;
    /* opacity: 0.5;
    color: #000; */
}

a{
    text-decoration: none;
    color: black;
}

a:hover{
    color: #39c8d2;
}

.xiaceng{
    width: 560px;
    height: 165px;
    margin: auto;
    /* padding: 0; */
    margin-top: 30px;
    margin-left: 30px;
    margin-bottom: 0px;
/* 我用通配符去掉外边缘了，为啥这儿还有 */
    /* overflow-y: auto; */
}

.diceng img{
    width: 590px;
}

.xinxi{
    width: 410px;
    height: 40px;
    background-color: skyblue;
    margin: 5px;
    border-radius: 8px;
    position: relative;
    left: 70px;
    background-image: linear-gradient(
        to right,
        skyblue,
        white
    );
    box-shadow: 1px 3px 5px 1px rgba(69, 66, 66, 0.3);
    display: flex;
    align-items: center;
}

/* div span{
    position: absolute;
    left: 470px;

}

div span:nth-child(2){
    position: absolute;
    left: 450px;
    bottom: 3px;
} */

.biaoshi{
    display: flex;
}

div li{
    /* margin:auto; 为什么加这个属性li可以撑开盒子·*/
    margin: auto;
}

.img{
    border-radius: 50%;
}

.xiala{
    height: 140px;
    overflow-y: auto;
    /* position: relative; */
}

.neirong{
    width: 200px;
    height: 8px;
    font-family: PingFangSC-Semibold;
    font-size: 8px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #999999;
}

.de_re{
    width: 50px;
    height: 8px;
    font-family: PingFangSC-Semibold;
    font-size: 8px;
    /* font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px; */
    color: #000000;
    opacity: 0.77;

}

.tab{
    height: 20px;
    width: 20px;
}

.triangle1{
    height: 20px;
    width: 40px;
    background-color: skyblue;
    position: absolute;
    left: 55px;
    top: 185px;
    border-radius: 3px;
}

.triangle2 {
    height: 20px;
    width: 40px;
    background-color: skyblue;
    position: absolute;
    left: 55px;
    top: 210px;
    border-radius: 3px;
}

.triangle1::before{
    content: '';
    display: block;
    border: 1px solid #000;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 5px;
}

.triangle2::before{
    content: '';
    display: block;
    border: 1px solid #000;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 5px;
}

.triangle1::after{
    content: '';
    /* width: 0px;
    height: 0px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid black; */
    width: 10px;
    height: 10px;
    background-image: linear-gradient(270deg,
                #197482 0%,
                #cbedf3 69%,
                #e6f9fc 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    /* display: none; */
    position: absolute;
    left: 40px;
    top: 5px;
}

.triangle2::after {
    content: '';
    /* width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #197482; */
    /* display: none; */
    width: 10px;
    height: 10px;
    background-image: linear-gradient(270deg,
                #197482 0%,
                #cbedf3 69%,
                #e6f9fc 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    position: absolute;
    left: 40px;
    top: 5px;
}

.triangle1::after:visited{
    opacity: 1;
}

.triangle2::after:visited {
    opacity: 1;
}

button{
    font-size: 3px;
    background-color: #000;
}

.weidu{
    position: absolute;
    top: -6px;
    left: 15px;
}

.yidu{
    position: absolute;
    top: -6px;
    left: 15px;
}